<template>
  <div class='contact'>
    <van-nav-bar title="联系我们"
                 left-text=""
                 left-arrow
                 @click-left="onClickLeft"/>
    <ul>
      <li>联系我们</li>
      <li>
        <img src="../../../static/index/ioc-29.png"
             alt="">
        <span>电话 : </span>

        <!--<a href='tel:123456'>-->

        <div class="phone ml10">
          <img src="../../../static/index/tel.png"
               alt="">
          <a :href="`tel:${UserInfoPhone}`"><span>{{UserInfoPhone}}</span></a>
          <!--<span>{{UserInfoPhone}}</span>-->

        </div>
      </li>
      <li>
        <img src="../../../static/index/ioc-30.png"
             alt="">
        <span>邮箱 : </span>
        <span class="ml10">{{UserInfoEmail}}</span>
      </li>
      <li></li>
    </ul>
  </div>
</template>
<script>
  import {getStore, setStore} from '@/config/mUtils'

  export default {
    name: "contact",
    data() {
      return {
        UserInfoPhone: '',
        UserInfoEmail: ''
      }
    },
    created() {
      this.$axios.post('mpconfig/contact').then((res) => {
        this.UserInfoPhone = res.data.data.phone
        this.UserInfoEmail = res.data.data.email
      })
    },
    methods: {
      onClickLeft() {
        this.$router.go(-1)
      }
    },
  }
</script>
<style scoped lang="scss">
  @import "../../../static/css/user/contact.scss";

  .contact > > > .van-nav-bar.van-hairline--bottom {
    background-color: #c30000;
    color: white;
  }

  .contact > > > .van-nav-bar__title {
    color: #fff;
  }

  .contact > > > .van-icon-arrow-left:before {
    color: #fff;
  }

  .ml10 {
    margin-left: 10px;
  }

  .contact a {
    color: #333;
  }

  .ml10 {
    margin-left: 10px;
  }

  .van-nav-bar__title {
    color: #fff;
  }

  .phone {
    margin-left: 40px;

    img {
      position: relative;
      left: -20px;
      top: 0px;
    }

    a {
      margin-top: -40px;
    }
  }

  .van-icon-arrow-left:before {
    color: #fff;
  }
</style>
